<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: First Physics</h1>




        <script id='init' type='text/x-cindyscript'>
numbguess(x,t):=(

                 if(x~=round(x)%t<1,
                    [round(x),1],
                    p=1/(x-floor(x));
                    v=numbguess(p,t-1);
                    [v_2+floor(x)*v_1,v_1];
                    );
                 );
        subs(pos,a,b,siz):=(
          drawtext(pos,a,size->siz);
          drawtext(pos+(0.3,-.2)*siz/40,b,size->siz*.7);
        );
        inpa=-C.x;

renderEq(a,b,c) := (
        latex = "$\begin{pmatrix}"+
        "-3&1&1\\"+
        "1&-4&1\\"+
        "1&1&-4"+
        "\end{pmatrix}\cdot"+
        "\begin{pmatrix}"+
        "x_1\\"+
        "x_2\\"+
        "x_3"+
        "\end{pmatrix}="+
        "\begin{pmatrix}"+
        a+"\\"+
        b+"\\"+
        c+
        "\end{pmatrix}$";
        drawtext([5, 4], latex);
);

inpb=-A.x-B.x;
inpc=-D.x-B.x;
inpa=round(inpa*1000)/1000;
inpb=round(inpb*1000)/1000;
inpc=round(inpc*1000)/1000;
renderEq(inpa, inpb, inpc);
toggle=false;
togglebr():=(
   toggle=!toggle;

);
        </script>

        <script id='csmove' type='text/x-cindyscript'>

        if(toggle,errc("br"));
        if(!toggle,errc("!!br"));
          xx1=numbguess(E.x,10);
          xx2=numbguess(F.x,10);
          xx3=numbguess(G.x,10);
          if(xx1_2>100 % !toggle,
            drawtext((6,2),"$x_1="+E.x+"$"),
            drawtext((6,2),"$x_1="+xx1_1+"/"+xx1_2+"$");
          );
         if(xx2_2>100 % !toggle,
            drawtext((6,1.5),"$x_2="+F.x+"$"),
            drawtext((6,1.5),"$x_2="+xx2_1+"/"+xx2_2+"$");
          );
         if(xx3_2>100 % !toggle,
            drawtext((6,1),"$x_3="+G.x+"$"),
            drawtext((6,1),"$x_3="+xx3_1+"/"+xx3_2+"$");
          );

inpa=-C.x;
inpb=-A.x-B.x;
inpc=-D.x-B.x;
inpa=round(inpa*100)/100;
inpb=round(inpb*100)/100;
inpc=round(inpc*100)/100;
renderEq(inpa, inpb, inpc);
        </script>

        <script type="text/javascript">
        </script>
        <div style="position:relative">
        <div  id="CSCanvas" style="width:800px; height:500px; border:2px solid #000000;position:absolute; top:0px; left:0px;"></div>
<div style="position:absolute; top:80px; left:450px; display:inline;z-index:4">
         <div id="tex" style="font-size: 110%;" ></div>
</div>
</div>

        <script type="text/javascript">

            var gslp=[
                      {name:"A", printname:"$q_1$", type:"Free", pos:[0,0],color:[1,0,0],labeled:true,textsize:20},
                      {name:"B", printname:"$q_3$", type:"Free", pos:[0,4],color:[1,0,0],labeled:true,textsize:20},
                      {name:"C", printname:"$q_2$", type:"Free", pos:[4,0],color:[1,0,0],labeled:true,textsize:20},
                      {name:"D", printname:"$q_4$", type:"Free", pos:[4,4],color:[1,0,0],labeled:true,textsize:20},
                      {name:"E", printname:"$(x_2,y_2)$", type:"Free", pos:[1.3123,1.8],color:[1,.5,.5],labeled:true,textsize:20},
                      {name:"F", printname:"$(x_3,y_3)$", type:"Free", pos:[2.4332,3.1],color:[1,.5,.5],labeled:true,textsize:20},
                      {name:"G", printname:"$(x_1,y_1)$", type:"Free", pos:[2.8321,1.7],color:[1,.5,.5],labeled:true,textsize:20},
                      {name:"a", type:"Segment", args:["A","E"] },
                      {name:"b", type:"Segment", args:["B","E"] },
                      {name:"c", type:"Segment", args:["B","F"] },
                      {name:"d", type:"Segment", args:["C","G"] },
                      {name:"e", type:"Segment", args:["D","F"] },
                      {name:"f", type:"Segment", args:["E","F"] },
                      {name:"g", type:"Segment", args:["F","G"] },
                      {name:"h", type:"Segment", args:["E","G"] }


                    ];
            var physics=[
                       {behavior:{type:"Environment",gravity:-.2}},
                       {name:"E", behavior:{type:"Mass",friction:0.3}},
                       {name:"F", behavior:{type:"Mass",friction:0.3}},
                       {name:"G", behavior:{type:"Mass",friction:0.3}},
                       {name:"a", behavior:{type:"Spring"}},
                       {name:"b", behavior:{type:"Spring"}},
                       {name:"c", behavior:{type:"Spring"}},
                       {name:"d", behavior:{type:"Spring"}},
                       {name:"e", behavior:{type:"Spring"}},
                       {name:"f", behavior:{type:"Spring"}},
                       {name:"g", behavior:{type:"Spring"}},
                       {name:"h", behavior:{type:"Spring"}}


                       ];
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics,
                        grid:1,
                        snap:true,
                        transform:[{scale:3.132},{translate:[-2.5,-2.5]}],
                        use: ["katex"],
}
                        );

        </script>
       <div style="position:absolute; top:630px;left:10px">
        <button onclick="cdy.play()" type="button" >Play</button>
        <button onclick="cdy.pause()" type="button" >Pause</button>
        <button onclick="cdy.stop()" type="button">Stop</button>&nbsp;&nbsp;&nbsp;
        <input onclick="cdy.evokeCS('togglebr()')" type="checkbox" >Brüche Raten<br>
        </div>
	</body>
</html>
